<template>
  <div class="container">
    <a-row type="flex" class="el-row">
      <a-col :xs="24" :sm="24" :md="11" :lg="14" :xl="14"></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <a-form
          :model="formState"
          name="normal_login"
          class="login-form"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <div class="title">您好 !</div>
          <div class="title-tips">欢迎来到市场项目收集管理系统！</div>
          <a-form-item
            name="username"
            :rules="[{ required: true, message: '请输入手机号或者邮箱！' }]"
          >
            <a-input
              size="large"
              v-model:value="formState.username"
              placeholder="手机号/邮箱"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="password"
            :rules="[{ required: true, message: '密码不能为空!' }]"
          >
            <a-input-password
              size="large"
              v-model:value="formState.password"
              placeholder="密码"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-form-item name="remember" no-style>
              <a-checkbox
                v-model:checked="formState.remember"
                >记住密码</a-checkbox
              >
            </a-form-item>
<!--            <a-->
<!--              class="login-form-forgot"-->
<!--              href="#"-->
<!--              @click="fnOpenForgetPwdModal"-->
<!--              >忘记密码</a-->
<!--            >-->
          </a-form-item>
          <a-form-item>
            <a-button
              :disabled="disabled"
              type="primary"
              html-type="submit"
              class="login-form-button"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :xs="24" :sm="24" :md="1" :lg="1" :xl="1">
        <div style="color: transparent;">占位符</div>
      </a-col>
    </a-row>
  </div>
  <!-- 忘记密码弹窗 -->
  <LoginForgetPwd />
</template>
<script lang="ts" setup>
import {
  defineComponent,
  reactive,
  computed,
  getCurrentInstance,
  ref,
  provide,
} from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { post } from "@/service/request";
import { message, notification } from "ant-design-vue";
import { useRouter } from "vue-router";
import { userInfo } from "@/store/user";
import { usePermissionStore } from "@/store/permission";
import LoginForgetPwd from "@/components/page/login-forgetPwd.vue";

const modalVisibale = ref(false);
function updateModalVisiable() {
  modalVisibale.value = !modalVisibale.value;
}
provide("LoginModalProvide", {
  modalVisibale,
  updateModalVisiable,
});

const router = useRouter();
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});

const onFinish = async (values: any) => {
  // console.log('Success:', values);
  let postParam = { phone: values.username, password: values.password };
  post(`/users/login`, postParam).then((res: any) => {
    if (res.errCode == 0) {
      const userStore = userInfo();
      userStore.info = Object.assign(userStore.info, res.data);
      userStore.login(res.data);
      const dis = getCurrentInstance();
      console.log("=====当前实例", dis);
      console.log("=====当前是咧2");
      notification["success"]({
        message: `${userStore.info.name}, 欢迎您`,
        description: `祝您工作愉快，天天好心情！`,
        // duration:3
      });
      router.push("/");

      console.log("写进去的数据", res.data);
      console.log("当前用户信息", userStore.info);
      let roleQuestParam = {} as any;
      let roleIds = [];
      roleIds.push(24);
      roleIds.push(25);
      roleQuestParam.idList = roleIds;
      console.log("当前角色列表====", roleQuestParam);
      // 写入角色菜单权限
      getRolePermissions(roleQuestParam);
    } else {
      message.error(res.msg);
    }
  });
};

// 获取角色信息
// const getRoles
// 获取角色权限
const getRolePermissions = (roleIds: any) => {
  post(`/menu/listByRoleIds`, roleIds).then((res: any) => {
    if (res.errCode == 0) {
      const permisstionStore = usePermissionStore();
      // permisstionStore.setPermissions(res?.data);
      // 存入store
      let tempList = Object.values(res.data);
      let permissionList = permissionHandleFunc(tempList);
      permisstionStore.permissions = permissionList;
      console.log("当前用户角色权限", permisstionStore.permissions);

      // for (const permission of permisstionStore.permissions) {
      //     console.log('======当前权限====', permission);
      // }
    } else {
      message.error(res.msg);
    }
  });
};

const permissionHandleFunc = (tempList: any) => {
  let tempPermissionList = tempList.reduce(function (a: any, b: any) {
    return a.concat(b);
  });

  let obj = {} as any;
  let permissionList = tempPermissionList.reduce(function (
    item: any,
    next: any
  ) {
    obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
    return item;
  },
  []);

  console.log("处理后的数组", permissionList);
  return permissionList;
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});

const fnOpenForgetPwdModal = () => {
  updateModalVisiable();
};
</script>
<style lang="less" scoped>
.container {
  height: 100vh;
  background: url(../../assets/logo-bg.jpg) 50% fixed no-repeat;
  background-size: cover;
  .login-form {
    position: relative;
    max-width: 100%;
    padding: 4.5vh;
    margin: calc(50vh - 237.5px) 5vw 5vw;
    overflow: hidden;
    background: url(../../assets/login_form_bg.png);
    background-size: 100% 100%;
    :deep(.ant-input-suffix) {
      margin-right: 24px;
    }
    .title {
      font-size: 54px;
      font-weight: 500;
      color: #fff;
    }
    .title-tips {
      margin-top: 24px;
      font-size: 26px;
      font-weight: 400;
      color: #fff;
    }
    :deep(.ant-form-item) {
      padding-right: 0;
      margin: 20px 0;
      color: #454545;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;
    }
    :deep(.ant-input-affix-wrapper-lg) {
      background: #f6f4fc;
      padding: 0;
    }

    :deep(.ant-input-prefix) {
      margin-left: 8px;
    }
    :deep(.ant-input-affix-wrapper) {
      padding: 0;
      .ant-input-suffix {
        background: #f6f4fc !important;
      }
      input {
        height: 48px;
        padding-left: 6px;
        font-size: 14px;
        line-height: 58px;
        background: #f6f4fc;
        border: 0;
      }
      input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #f6f4fc inset !important;
      }

      .anticon {
        svg {
          color: #d7dee3;
        }
      }
    }
  }

  :deep(.ant-form-item-control-input-content) {
    display: flex;
    justify-content: space-between;
  }

  //:deep(.ant-form-item) {
  //  margin: 0px;
  //  margin-bottom: 10px;
  //}

  :deep(.ant-form-item-explain) {
    position: absolute;
    top: 100%;
    left: 30px;
    width: 200px;
    font-size: 14px;
    text-align: left;
  }
  :deep(.ant-checkbox-wrapper) {
    color: #1890ff;
  }

  .login-form-button {
    width: 100%;
    height: 50px;
    font-size: 18px;
  }
}

.container-blur {
  filter: blur(5px);
}

.head-area {
  width: 100vw;
  height: 60px;
  border-bottom: 2px #1890ff36 solid;

  display: flex;
  align-items: center;

  .icon-img {
    margin-left: 20vw;
  }
}

.content-area {
  width: 30vw;
  height: 50vh;
  box-shadow: 10px 10px 20px 10px #1890ff5c;

  padding: 20px 40px 40px 40px;
  margin-top: 16vh;
  border-radius: 6px;
}

.title-text {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  color: #1890ff5c;
}
.ant-btn-primary[disabled]{
  color: #fff;
  border-color: #1890ff;
 background: #1890ff;
}

.input-area {
  position: relative;
  transform: translate(0, 0);
}

</style>
